Skip to content

Comments

Verify search/filter and scroll speed features on dev branch#83

Closed
Copilot wants to merge 5 commits intomainfrom
copilot/add-search-functionality
Closed

Verify search/filter and scroll speed features on dev branch#83
Copilot wants to merge 5 commits intomainfrom
copilot/add-search-functionality

Conversation

Copy link
Contributor

Copilot AI commented Feb 15, 2026

Verification

Confirmed PR #86 merge to dev is functional. Tested search/filter and configurable scroll speed features against running application.

Verified Components

Search/Filter

  • Input box with clear button renders correctly
  • guide-filter.js loads and executes without errors
  • Clear functionality operational

Scroll Speed

  • Desktop and mobile speed selectors present in Settings menu
  • Three presets (slow: 1200ms, medium: 650ms, fast: 350ms) working
  • localStorage persistence confirmed
  • Console debugging shows speed changes applied: [auto-scroll] Scroll speed changed to: fast

Integration

  • No JavaScript errors
  • Auto-scroll v36.3 continues functioning
  • No regressions in existing functionality

Screenshots

Guide page with search:
Guide with search

Settings menu with scroll speed:
Settings menu

Files Validated

static/js/guide-filter.js  (new)
static/js/auto-scroll.js   (enhanced)
templates/guide.html       (search container)
templates/_header.html     (speed selectors)
static/css/base.css        (styling)

All syntax checks passed. Features operational on dev branch (commit 91c6a78).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • iptv.lan
    • Triggering command: /usr/bin/python3 python3 app.py (dns block)
    • Triggering command: /usr/bin/python3 python3 app.py bin/WALinuxAgent-2.15.0.1-py3.12.egg -collect-logs (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

Overview

Add search/filter functionality to the guide and make the auto-scroll speed user-configurable.

Features to Implement

1. Add Search/Filter Box to Guide

Add a search input box that allows users to filter channels by name or program title in real-time.

UI Components

File: templates/guide.html (around line 50-70, before the guide grid)

Add a search input box in the header area:

<!-- Add after the player row, before the guide grid -->
<div class="search-container">
    <input 
        type="text" 
        id="channelSearch" 
        placeholder="Search channels or programs..." 
        autocomplete="off"
        aria-label="Search channels"
    >
    <button id="clearSearch" aria-label="Clear search"></button>
    <span id="searchResultCount"></span>
</div>

CSS Styling

File: static/css/base.css (add at the end)

/* Search Container */
.search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: var(--bg-color, #1a1a1a);
    border-bottom: 1px solid var(--border-color, #333);
    position: sticky;
    top: 0;
    z-index: 100;
}

#channelSearch {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    background: var(--input-bg, #2a2a2a);
    color: var(--text-color, #fff);
    font-size: 14px;
}

#channelSearch:focus {
    outline: none;
    border-color: var(--accent-color, #4a9eff);
}

#clearSearch {
    padding: 6px 10px;
    background: var(--button-bg, #333);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

#clearSearch:hover {
    background: var(--button-hover-bg, #444);
}

#searchResultCount {
    font-size: 12px;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

.guide-row.hidden-by-search {
    display: none !important;
}

JavaScript Filter Logic

File: static/js/guide-filter.js (new file)

(function() {
  'use strict';

  const searchInput = document.getElementById('channelSearch');
  const clearBtn = document.getElementById('clearSearch');
  const resultCount = document.getElementById('searchResultCount');

  if (!searchInput) return;

  function filterGuide() {
    const query = searchInput.value.toLowerCase().trim();
    const rows = Array.from(document.querySelectorAll('.guide-row'));
    
    // Don't filter the time header row
    const channelRows = rows.filter(row => {
      return row.querySelector('.chan-col') && 
             !row.classList.contains('hide-in-grid');
    });

    if (!query) {
      // Show all rows
      channelRows.forEach(row => row.classList.remove('hidden-by-search'));
      resultCount.textContent = '';
      return;
    }

    let visibleCount = 0;

    channelRows.forEach(row => {
      const chanName = row.querySelector('.chan-name');
      const programs = Array.from(row.querySelectorAll('.programme, .prog-col'));
      
      let matchFound = false;

      // Check channel name
      if (chanName && chanName.textContent.toLowerCase().includes(query)) {
        matchFound = true;
      }

      // Check program titles
      if (!matchFound) {
        for (const prog of programs) {
          const title = prog.querySelector('.title, .prog-title');
          if (title && title.textContent.toLowerCase().includes(query)) {
            matchFound = true;
            break;
          }
        }
      }

      if (matchFound) {
        row.classList.remove('hidden-by-search');
        visibleCount++;
      } else {
        row.classList.add('hidden-by-search');
      }
    });

    resultCount.textContent = `${visibleCount} of ${channelRows.length} channels`;
  }

  function clearSearch() {
    searchInput.value = '';
    filterGuide();
    searchInput.focus();
  }

  // Event listeners
  searchInput.addEventListener('input', filterGuide);
  searchInput.addEventListener('keyup', (e) => {
    if (e.key === 'Escape') clearSearch();
  });
  
  if (clearBtn) {
    clearBtn.addEventListener('click', clearSearch);
  }

  // Initial state
  filterGuide();
})();

Include in guide.html:
Add before closing </body> tag:

<script src="{{ url_for('static', filename='js/guide-filter.js') }}" defer></script>

2. Adjustable Scrolling Speed for Auto-Scroll

Allow users to configure the auto-scroll speed with a setting in the UI.

Add Speed Setting to UI

File: templates/_header.html or templates/guide.html

Add a speed selector in the settings dropdown (if it exists), or add a small control near the auto-scroll toggle:

<!-- Add near auto-scroll controls in the header menu -->
<div class="scroll-speed-control">
    <label for="scrollSpeed">Scroll Speed:</label>
    <select id="scrollSpeed">
        <option value="slow">Slow</option>
        <option value="medium" selected>Medium</option>
      ...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey).

Copilot AI and others added 2 commits February 15, 2026 03:18
Co-authored-by: thehack904 <35552907+thehack904@users.noreply.github.com>
Co-authored-by: thehack904 <35552907+thehack904@users.noreply.github.com>
Co-authored-by: thehack904 <35552907+thehack904@users.noreply.github.com>
Copilot AI changed the title Add search/filter and configurable auto-scroll speed to guide Add channel/program search and configurable scroll speed Feb 15, 2026
Co-authored-by: thehack904 <35552907+thehack904@users.noreply.github.com>
Copilot AI changed the title Add channel/program search and configurable scroll speed Verify search/filter and scroll speed features on dev branch Feb 15, 2026
@thehack904 thehack904 closed this Feb 16, 2026
@thehack904 thehack904 deleted the copilot/add-search-functionality branch February 16, 2026 00:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants